import React, { Component } from 'react';
import CaseStore, { CaseDataTable } from '../../stores/CaseStore';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import { Table } from 'antd';
import { NavBar, Icon } from 'antd-mobile';

import './Unsatisfy.scss';

interface UnsatisfyProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}

const turnArr = ['首', '二', '三'];



@inject('componentStore', 'caseStore', 'routingStore')
@observer
export default class extends Component<UnsatisfyProps> {
    componentWillMount() {
        const { caseStore } = this.props;
        caseStore.getUnsatisfy();
    }
    render() {
        const { caseStore, routingStore } = this.props;
        const UnsatisfyTable = caseStore.UnsatisfyTable;
        const title = caseStore.CaseListCategory;
        const firstColumns = [
            {
                dataIndex: 'title',
                key: 'title',
                render: (text: string, record: string, index: number) => {
                    return <span className="table-common">{text + ':'}</span>;
                },
                width: 150
            },
            {
                dataIndex: 'info',
                key: 'info',
                render: (text: string, record: string, index: number) => {
                    return (
                        <div
                            className={index === 0 || index === 6 || index === 5 ? 'table-common' : 'table-active'}
                            onClick={
                                () => {
                                    if (!(index === 0 || index === 6 || index === 5)) {
                                        caseStore.setCaseListCategory('工单列表');
                                        routingStore.push('/case_list');
                                    }

                                }
                            }
                        >
                            {text}
                        </div >
                    );
                }
            }
        ];

        const restColumns = [
            {
                dataIndex: 'title',
                key: 'title',
                render: (text: string, record: string, index: number) => {
                    return <span className="table-common">{text + ':'}</span>;
                },
                width: 150
            },
            {
                dataIndex: 'info',
                key: 'info',
                render: (text: string, record: string, index: number) => {
                    return (
                        <div
                            className={index === 4 || index === 9 ? 'table-common' : 'table-active'}
                            onClick={() => {
                                if (index !== 4 && index !== 9) {
                                    caseStore.setCaseListCategory('工单列表');
                                    routingStore.push('/case_list');
                                }
                            }}
                        >
                            {text}
                        </div >
                    );
                }
            }
        ];
        return (
            <div className="unsatisfy-box">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                >
                    {title}
                </NavBar>
                <div className="unsatisfy-container">
                    {
                        UnsatisfyTable.map((v: CaseDataTable[], i: number) => (
                            <div className="unsatisfy-item">
                                <header>{turnArr[i] + '次办理满意度'}</header>
                                {
                                    i === 0 ? (<Table
                                        columns={firstColumns}
                                        dataSource={v}
                                        bordered={true}
                                        showHeader={false}
                                        pagination={false}

                                    />)
                                        : (
                                            <Table
                                                columns={restColumns}
                                                dataSource={v}
                                                bordered={true}
                                                showHeader={false}
                                                pagination={false}
                                            />
                                        )
                                }

                            </div>
                        ))
                    }
                </div>

            </div>
        );
    }
}